<template>
    <div>
        <a-card title="基本设置">
            <!-- <template #extra><a-button type="primary" @click="onSubmit">保存</a-button></template> -->
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="头像">
                    <a-upload
                        v-model:file-list="fileList"
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                    >
                        <img v-if="formState.avatarPath" :src="formState.avatarPath" style="width: 100px" alt="avatar" />
                        <div v-else>
                            <loading-outlined v-if="loading"></loading-outlined>
                            <plus-outlined v-else></plus-outlined>
                            <div class="ant-upload-text">上传</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="名称">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20"> <a-input v-model:value="formState.nickName" disabled /></a-col>
                        <a-col :span="2">
                            <a-button type="primary" @click="handNameFun">
                                <template #icon>
                                    <EditOutlined />
                                </template>
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="邮箱">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20"> <a-input v-model:value="formState.email" disabled /></a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="商户密钥" v-if="userType == 'T'">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20"> <a-input v-model:value="formState.key" disabled /></a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="连锁门店" v-if="userType == 'T'">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20"><a-input v-model:value="formState.storesNum" disabled /></a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="账号">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20"> <a-input v-model:value="formState.username" disabled /></a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="密码">
                    <a-row :gutter="[24, 24]">
                        <a-col :span="20">
                            <a-input-password type="password" disabled :visibilityToggle="false" v-model:value="password"
                        /></a-col>
                        <a-col :span="2">
                            <a-button type="primary" @click="handPawFun">
                                <template #icon>
                                    <EditOutlined />
                                </template>
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
        </a-card>
        <pawModel :visible="pawShow" :title="t('yl.editPass')" @cancle="handlePawCancle" @submit="handlePawSubmit"></pawModel>
        <userNameMode
            :visible="userNameShow"
            :title="'修改名称'"
            :nickName="formState.nickName"
            @cancle="handleNameCancle"
            @submit="handleNameSubmit"
        ></userNameMode>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRaw, ref, UnwrapRef } from 'vue';
import pawModel from './components/pawModel.vue';
import userNameMode from './components/userNameMode.vue';
import { getUserInfo, addAvatar, editUserCenter, updatePass, editUser, getUsersType } from '@/api/user';
import { message } from 'ant-design-vue';

import { useI18n } from 'vue-i18n';
interface FormState {
    avatarPath: string;
    username: string;
    nickName: string;
    email: string;
    id: number;
    merchantCode: string;
    phone: string | number;
    gender: string | number;
    key: string | number;
    storesNum: string | number;
}
interface FileItem {
    uid: string;
    name?: string;
    status?: string;
    response?: string;
    url?: string;
    type?: string;
    size: number;
    originFileObj: any;
}

export default defineComponent({
    components: {
        pawModel,
        userNameMode,
    },
    setup() {
        const formState = ref<FormState>({
            id: 0,
            avatarPath: '',
            username: '',
            nickName: '',
            email: '',
            merchantCode: '',
            phone: '',
            gender: '',
            key: '',
            storesNum: '',
        });
        const password = '12345678';
        const fileList = ref<FileItem[]>([]);
        const loading = ref<boolean>(false);
        const imageUrl = ref<string>('');
        const { t } = useI18n();
        const pawShow = ref<boolean>(false);
        const userNameShow = ref<boolean>(false);
        const userType = ref<any>('');

        const beforeUpload = (file: FileItem) => {
            fileList.value = [...fileList.value, file];
            return false;
            // var fileSize = 0;
            // var fileMaxSize = 1024; //1M
            // var filePath = file.name;
            // if (filePath) {
            //     fileSize = file.size;
            //     var size = fileSize / 1024;
            //     if (size > fileMaxSize) {
            //         alert('文件大小不能大于1M！');
            //         file = '';
            //         return false;
            //     } else if (size <= 0) {
            //         alert('文件大小不能为0M！');
            //         file = '';
            //         return false;
            //     }
            // } else {
            //     return false;
            // }
        };

        // 获取信息
        const getInfo = async () => {
            userType.value = await getUsersType();

            const { user, userInfo } = await getUserInfo();
            formState.value = user;
            formState.value.key = userInfo.key;
            formState.value.storesNum = userInfo.storesNum;
        };
        // 上传图片
        const handleChange = async (info: any) => {
            console.log(info);
            let formData = new FormData();
            formData.append('avatar', info.file);
            await addAvatar(formData);
            message.success('上传成功');
            getInfo();
        };
        onMounted(() => {
            getInfo();
        });

        const handPawFun = () => {
            pawShow.value = true;
        };
        const handlePawCancle = () => {
            pawShow.value = false;
        };
        const handlePawSubmit = async (qty: any) => {
            console.log(qty);
            delete qty.repeatOldPass;
            // 重置密码
            await updatePass(qty);
            getInfo();
            pawShow.value = false;
        };
        const handNameFun = () => {
            userNameShow.value = true;
        };
        const handleNameCancle = () => {
            userNameShow.value = false;
        };
        const handleNameSubmit = async (qty: any) => {
            await editUserCenter({
                id: formState.value.id,
                nickName: qty,
                email: formState.value.email,
                gender: formState.value.gender,
                phone: formState.value.phone,
            });
            message.success('保存成功');
            getInfo();
            userNameShow.value = false;
        };
        return {
            fileList,
            loading,
            beforeUpload,
            handleChange,
            imageUrl,
            labelCol: { style: { width: '150px' } },
            wrapperCol: { span: 5 },
            formState,
            userType,
            pawShow,
            userNameShow,
            password,
            handPawFun,
            t,
            handlePawCancle,
            handlePawSubmit,
            handNameFun,
            handleNameCancle,
            handleNameSubmit,
        };
    },
});
</script>
